<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登 录</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="/static/css/floating-labels.css" rel="stylesheet">
</head>

<body>
    <form class="form-signin">
        <div class="text-center mb-4">
            <h1 class="h3 mb-3 font-weight-normal">登 录</h1>
        </div>
        <div class="form-label-group"><input type="text" id="username" class="form-control"
                placeholder="Email address" required="" autofocus=""></div>
        <div class="form-label-group"><input type="password" id="password" class="form-control"
                placeholder="Password" required=""></div>
        <div class="checkbox mb-3"><label><input type="checkbox" value="remember-me"> 记住我 </label></div><button
            class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <p class="mt-5 mb-3 text-muted text-center">©2021-2027</p>
    </form>
</body>
<style>
    body {
           background-color: azure;
    }
</style>
<script>
    document.querySelector('.form-signin').addEventListener('submit', function(event) {
        submitForm(event, '/api/login_for_access_token');
    });
    function submitForm(e, url) {
        e.preventDefault();
        var username = e.target.elements.username.value;
        var password = e.target.elements.password.value;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `username=${username}&password=${password}`
        })
        .then(response => response.json())
        .then(function (data) {
            console.log(data);
            if (data.code === 200) {
                document.cookie = `access_token=${data.access_token}`
                localStorage.setItem('access_token', data.access_token);
                window.location.href = '/api/index?' + new Date().getTime();
            } else {
                alert("密码错误！");
            }
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script>
</html>
